<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>超级分类</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            background-color: #fff;
            height: 100%;
        }

        .aui-bar-nav {
            /*padding: 0 11px 0 13px;
        box-sizing: border-box;*/
            top: 0;
            line-height: 2.25rem;
            color: #ffffff;
            background: linear-gradient(266deg, #7D0DFB, #D115FD);
        }

        .aui-bar-nav .aui-btn .aui-iconfont {
            font-size: 0.9rem;
            line-height: 1.25rem;
            padding: 0;
            margin: 0;
            color: #000000;
        }

        .aui-bar-nav .aui-title {
            min-height: 2.25rem;
            position: absolute;
            margin: 0;
            text-align: center;
            white-space: nowrap;
            right: 5rem;
            left: 5rem;
            width: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            z-index: 2;
            color: #fff;
            font-size: 17px;
        }

        .aui-btn span {
            width: 22px;
            height: 22px;
        }

        .aui-btn span img {
            width: 22px;
            height: 22px;
        }

        .aui-bar-nav .aui-pull-right {
            padding: 0 11px;
            font-size: 0.8rem;
            font-weight: 400;
            z-index: 2;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
        }

        button,
        .aui-btn {
            position: relative;
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 400;
            font-family: inherit;
            text-decoration: none;
            text-align: center;
            margin: 0;
            background: #EEEEEE;
            padding: 0 15px!important;
            height: 1.5rem;
            line-height: 1.5rem;
            border-radius: 0.2rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-user-select: none;
            user-select: none;
        }

        .aui-pull-right {
            font-size: 15px;
            color: #222222!important;
            text-align: right;
        }

        .category {
            width: 84px;
            height: 100%;
            /*padding: 0 15px;*/
            box-sizing: border-box;
            border-right: 0.5px solid #EEEEEE;
            position: fixed;
            overflow: auto;
            /*border: none;
          background-size: 100% 1px;
          background-repeat: no-repeat;
          background-position: right;
          background-image: linear-gradient(0, #EEEEEE, #EEEEEE 50%, transparent 50%);
          background-image: -webkit-linear-gradient(90deg, #EEEEEE, #EEEEEE 50%, transparent 50%);*/
            /*overflow: hidden;*/
        }

        .category ul {
            width: 100%;
            height: 100%;
            background: #E6E8ED;
            overflow: hidden;
        }

        .category ul li {
            width: 84px;
            /*padding: 0 17.5px;*/
            padding: 19px 0;
            overflow: hidden;
            background: #E6E8ED;
        }

        .category ul li.active {
            background-color: #fff!important;
        }

        .category ul li .cate_top {
            width: 100%;
            display: flex;
        }

        .category ul li .cate_top span.icon {
            width: 14px;
            height: 14px;
            background: url(../../image/hot_icon.png) no-repeat;
            background-size: 100% 100%;
        }

        .category ul li .cate_top span.text {
            width: auto;
            height: 14px;
            line-height: 14px;
            font-size: 14px;
            color: #333333;
            font-family: PingFang SC;
            font-weight: 400;
        }

        .category ul li .cate_top span.textActive {
            color: #FF3537!important;
            font-weight: bolder;
        }

        .category ul li .cate_numnerActive {
            color: #FF3537!important;
            font-weight: bolder;
        }

        .category ul li .cate_numner {
            width: 100%;
            height: 14px;
            line-height: 14px;
            font-size: 13px;
            color: #333333;
            font-family: PingFang SC;
            font-weight: 400;
            margin-top: 6px;
            text-align: center;
        }

        .selected {
            background: linear-gradient(266deg, #7D0DFC, #D116FD);
            color: #fff!important;
        }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav" id="header">
        <a class="aui-pull-left aui-btn" tapmode onclick="closeWin()">
            <span>
               <img src="../../image/white_back.png" alt="">
            </span>
        </a>
        <div class="aui-title">买买卡</div>
    </header>
    <div class="category" id="app">
        <ul>
            <li v-for='(item,index) in good_name_list' :class="{'active':isActive==index}" tapmode @click="change(index,item.id)">
                <div class="cate_top">
                    <span class="icon"></span>
                    <span class="text" :class="{'textActive':isActive==index}">{{item.cname}}</span>
                </div>
                <!-- <div class="cate_numner" :class="{'cate_numnerActive':isActive==index}">20</div> -->
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script type="text/javascript">
    apiready = function() {
        cl.apiready();


        vm.getIndexCateGory();
    }

    var vm = new Vue({
        el: "#app",
        data: {
            isActive: 0,
            good_name_list: []
        },
        methods: {
            /**
             *
             * 获取首页小分类
             * @return {[type]} [description]
             */
            getIndexCateGory: function() {
                api.ajax({
                    url: cl.apiServer + 'buyBuyCard/getList',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8',
                        token:cl.userToken
                    },
                    data: {
                        body: {
                            parentId: 0,
                            version:cl.deviceInfo().appVersion,
                            mobileInfo:cl.systemType()
                        }
                    }
                }, function(ret, err) {
                    // alert(JSON.stringify(ret));
                    if (ret) {
                        if (ret.code == 0) {
                            vm.good_name_list = ret.data;
                            vm.openFrameGroup(ret.data)
                        }
                    }
                });
            },
            openFrameGroup:function(items){
              var header = $api.byId('header');
              var headerH = $api.fixStatusBar(header);
              var frames = [];
              console.log(items.length);
              for (var i = 0; i <items.length; i++) {
                  frames.push({
                      name: 'buy_card_frame_' + i,
                      url: './buy_card_frame.html',
                      bounces: true,
                      bgColor: "#FAF9F9",
                      pageParam:{
                        id:items[0].id
                      }
                  })
              }
              api.openFrameGroup({
                  name: 'categoryGroup',
                  background: '#FAF9F9',
                  scrollEnabled: false,
                  rect: {
                      x: 84,
                      y: headerH,
                      w: 'auto',
                      h: 'auto'
                  },
                  index:0,
                  frames:frames
              }, function(ret, err) {
                  if (ret) {
                      // alert(JSON.stringify(ret));
                  }
              });
            },
            change: function(index, id) {
                console.log(id);
                vm.isActive = index;
                api.setFrameGroupIndex({
                    name: 'categoryGroup',
                    index:index
                });
                api.sendEvent({
                    name: 'getbuycard',
                    extra: {
                        id: id,
                    }
                });

                // var jsfun = 'vm.getIndexCateGory("' + id + '");';
                // api.execScript({
                //     frameName: 'package_mail_frame',
                //     script: jsfun
                // });
            }
        }
    })

    function closeWin() {
        cl.closeWin({
            name: 'buy_card'
        })
    }
</script>

</html>
